<template>
  <!--指定审核人-->
  <div>
    <edu-dialog :title="$t('graduationDesign.designatedReviewer')" width="70%" @close="onCancel" :visible="designatedDialogVisible">
      <div class="edu-opertion-bar">
        <div class="float-left">
          <el-input v-model="queryForm.condition.teacher" :placeholder="$t('graduationDesign.pleaseEnterWorkNumSearch')" style="width:300px" @keyup.enter.native="searchList" clearable>
            <i slot="suffix" class="el-icon-search" style="margin-top:10px;cursor:pointer" @click="searchList"></i>
          </el-input>
        </div>
      </div>
      <el-table ref="designatedReviewerTable" :data="designatedTableData" @row-click="handleCourseRowClick" size="mini" stripe tooltip-effect="light">
        <el-table-column :label="$t('graduationDesign.choose')" min-width="60">
          <template slot-scope="scope">
            <el-radio v-model="currentRowId" :label="scope.row.code">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="code" :label="$t('graduationDesign.jobNumber')" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" :label="$t('graduationDesign.name')" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="title" :label="$t('graduationDesign.jobTitle')" min-width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="facultyI18n" :label="$t('graduationDesign.college')" min-width="110" show-overflow-tooltip></el-table-column>
      </el-table>
      <div class="edu-opertion-bar">
        <div class="float-right">
          <el-pagination :current-page.sync="queryForm.pageNum_" :page-sizes="[20, 50, 100, 500, 1000]" :page-size="queryForm.pageSize_" :total="queryForm.total_" layout="total, sizes, prev, pager, next, jumper" style="float: right;margin:10px 60px 0 0;" @size-change="handlePageSizeChange" @current-change="handleCurrentPageChange" />
        </div>
      </div>
      <div slot="buttons">
        <el-button @click="onCancel">{{$t('graduationDesign.cancel')}}</el-button>
        <el-button type="primary" @click="onSubmit">{{$t('graduationDesign.confirm')}}</el-button>
      </div>
    </edu-dialog>
  </div>
</template>
<script>
import API from "common/src/api/underGraduationDesign/reviewSubject"

export default {
  name: 'designatedReviewer',
  props: {
    designatedDialogVisible: {
      type: Boolean,
      default: false
    },
    selectedList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      api: API,
      queryForm: {
        pageNum_: 1,
        pageSize_: 20,
        total_: 0,
        condition: {
          teacher: ''
        }
      },
      designatedTableData: [], // 指定审核人列表
      currentRowId: "",
      designatedReviewerInfo: {} // 选中的数据
    };
  },
  mounted() { },
  methods: {
    searchList() {
      this.currentRowId = "";
      this.designatedReviewerInfo = {};
      this.designatedTableData = [];
      this.api.getDesigntedDetail(this.queryForm).then(res => {
        this.designatedTableData = res.data.list;
        this.queryForm.pageNum_ = res.data.pageNum;
        this.queryForm.pageSize_ = res.data.pageSize;
        this.queryForm.total_ = res.data.total;
      }).catch(() => { });
    },
    reset() {
      this.queryForm = {
        pageNum_: 1,
        pageSize_: 20,
        total_: 0,
        condition: {
          teacher: ''
        }
      };
      this.searchList();
    },
    // 页面size
    handlePageSizeChange(val) {
      this.queryForm.pageSize_ = val;
      this.searchList();
    },
    // 分页
    handleCurrentPageChange(val) {
      this.queryForm.pageNum_ = val;
      this.searchList();
    },
    // 单选按钮选中
    handleCourseRowClick(row) {
      this.currentRowId = row.code;
      this.designatedReviewerInfo = { ...row };
    },
    onSubmit() {
      const data = {
        optInfoEntities: this.selectedList,
        teacherDto: {
          teacherId: this.designatedReviewerInfo.code,
          teacherName: this.designatedReviewerInfo.name
        }
      };
      this.$emit("designated-submit", data);
    },
    onCancel() {
      this.$emit("designated-cancel");
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
